<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
	<title>苏州环球港摇红包</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/hc-animate.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/vconsole.min.js"></script>
	<script>
		var isDebugMode = getSearchParam().debug
		
		if(isDebugMode){
			new VConsole()
		}
		
		function getSearchParam(){
			var search = location.search
			var result = {}
			
			if(search){
				search = search.slice(1)
				var kvs = search.split('&')
				
				kvs.forEach(function(kvStr){
					var arr = kvStr.split('=')
					var k = arr[0]
					var v = arr[1]
					
					result[k] = v
				})
			}
			
			return result
		}
	</script>
	<script src="js/login.js?t=1"></script>
	<script src="http://szhqg.horsevision.cn/weixin/activity/js-info"></script>
	<script src="js/share.js?t=1"></script>
</head>

<body>
	<audio id="audio"></audio>
	<section id="loading">
		<div class="loadCenter">
			<img class="lodingBtm" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/loading.gif" alt="">
			<p id="progress">0%</p>
		</div>
	</section>
	<!-- 主页面 -->
	<section class="container comBg">
		<img class="logo" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/logo.png" alt="">
		<span class="rule">活动
			<br>规则</span>
		<div class="titleBox">
			<img src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/textBg.png" alt="">
			<img class="balloon swing" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/balloon.png" alt="">
			<img class="text" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/text.png" alt="">
		</div>
		<div class="shakeBox">
			<div class="shakeImg">
				<img src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/0.png" alt="">
			</div>
		</div>
		<div class="myPrice hide">我的奖品</div>
		<img class="bottomImg" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/indexBottom.png" alt="">
	</section>
	<!-- 活动规则 -->
	<section class="ruleBox cmPage comBg hide">
		<div class="ctLogo">
			<img src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/logo.png" alt="">
		</div>
		<div class="ruleMain">
			<p class="pageTitle">
				<span>活动规则</span>
			</p>
			<img class="close" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/close.png" alt="">
			<div class="ruleText">
				<div class="rulePart">
					<p class="ruleTitle">
						<span>活动时间</span>
					</p>
					<p>2018年12月22日至12月25日每天11点至21点每个整点</p>
				</div>
				<div class="rulePart">
					<p class="ruleTitle">
						<span>活动奖品</span>
					</p>
					<p>现金红包和代金券</p>
				</div>
				<div class="rulePart">
					<p class="ruleTitle">
						<span>参与方式</span>
					</p>
					<p>· 关注苏州环球港微信公众号；
						<br>· 点击公众号菜单栏“摇红包”，进入活动页面；
						<br>· 活动期间每天11点至21点每个整点开始摇红包；
						<br>· 每个ID在每个时段可无限期摇奖，直至抽中奖品或本轮奖品被抢空，没有中奖的等待下一个整点；
						<br>· 活动期间每个ID只能中奖1次。</p>
				</div>
				<div class="rulePart">
					<p class="ruleTitle">
						<span>领奖规则</span>
					</p>
					<p>·领奖时间；
						<br>2018年12月22日至12月25日；
						<br>·领奖地点
						<br>苏州环球港一楼服务台
						<br>·领奖方式
						<br>红包直接发放到中奖者的微信账户；
						<br>代金券兑奖需中奖者凭借“我的奖品”页面至一楼服务台，由工作人员输入兑换码核销后领取纸质券。</p>
				</div>
			</div>
		</div>
		<div class="shareBtn btn">分享好友</div>
	</section>
	<!-- 我的奖品 -->
	<section class="myPriceBox cmPage comBg hide">
		<div class="ctLogo">
			<img src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/logo.png" alt="">
		</div>
		<div class="ruleMain">
			<div class="priceCt">
				<img class="userHead" src="" alt="">
				<p class="pageTitle">
					<span>我的奖品</span>
				</p>
			</div>
			<div class="priceBox">
				<div class="priceText">
					<h1 class="priceTitle"></h1>
					<p class="money">
						<span></span>
					</p>
				</div>
				<div class="priceFront"></div>
			</div>
			<div class="cashPrize btn">去兑奖</div>
			<img class="close" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/close.png" alt="">
		</div>
	</section>
	<!-- 核销 -->
	<section class="WriteOff coverBox hide">
		<div class="coverBoxMain">
			<p class="writeTitle">兑换码</p>
			<p>请工作人员输入</p>
			<div class="writeCodeBox">
				<input type="text" name="writeCode" id="writeCode" maxlength="6" placeholder="请输入核销码" value="">
			</div>
			<p class="errorTxt"></p>
			<div class="coverOk btn">确定</div>
			<img class="closeBtn" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/closewt.png" alt="">
		</div>
	</section>
	<!-- 提示弹框 -->
	<section class="tipsBox coverBox hide">
		<div class="coverBoxMain">
			<p class="boxText"></p>
			<p class="shakeTime hide">0:50</p>
			<div class="coverOk btn">确定</div>
			<img class="closeBtn" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/closewt.png" alt="">
		</div>
	</section>
	<!-- 服务器忙 -->
	<section class="serverBusy coverBox hide">
		<div class="coverBoxMain">
			服务器繁忙，正在排队中...
		</div>
	</section>
	<!-- 分享 -->
	<section class="sharePage coverBox hide">
		<img class="sh1" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh1.png" alt="">
		<img class="sh2 moveAni" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh2.png" alt="">
		<img class="sh3 moveAni" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh3.png" alt="">
		<img class="sh4" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh4.png" alt="">
	</section>

	<!-- 未中奖 100%中奖，暂时不要未中奖-->
	<section class="noPrice coverBox hide">
		<div class="priceBox">
			<div class="priceText">
				<h1 class="priceTitle">很遗憾</h1>
				<p class="priceType">您什么都没摇到</p>
				<p class="money hide">
					<span></span>元</p>
			</div>
			<div class="priceFront">
				<div class="peBtn">确定</div>
			</div>
			<img class="closeBtn" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/closewt.png" alt="">
		</div>
	</section>

	<!-- 现金红包 -->
	<section class="cash coverBox hide">
		<div class="priceBox">
			<div class="priceText">
				<h1 class="priceTitle">恭喜你获得</h1>
				<p class="priceType">现金红包</p>
				<p class="money">
					<span></span>元</p>
			</div>
			<div class="priceFront">
				<div class="peBtn">确定</div>
				<p class="pfExplain">请在微信-我的钱包里面查收</p>
			</div>
			<img class="closeBtn" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/closewt.png" alt="">
		</div>
	</section>

	<!-- 代金券 -->
	<section class="CashCoupon coverBox hide">
		<div class="priceBox">
			<div class="priceText">
				<h1 class="priceTitle">恭喜你获得</h1>
				<p class="priceType">苏州环球港代金券</p>
				<div class="userInfor">
					<div class="userInforItem">
						<label>您的姓名</label>
						<input type="text" name="userName" id="userName" placeholder="请输入您的姓名">
					</div>
					<div class="userInforItem">
						<label>联系方式</label>
						<input type="text" name="userPhone" id="userPhone" placeholder="请输入您的联系方式" maxlength="11">
					</div>
				</div>
				<p class="inforTips">请务必填写正确的个人信息，
					<br>作为领奖凭证</p>
			</div>
			<div class="priceFront">
				<p class="pfExplain">兑奖时间：2018年12月22日至12月25日
					<br> 兑奖地点：苏州环球港一楼服务台
				</p>
				<div class="peBtn">确定</div>
			</div>
			<img class="closeBtn" src="https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/closewt.png" alt="">
		</div>
	</section>

	<script>
		var isYao = true; // 是否正在执行摇一摇的方法

		//预加载
		// iosAutoPlay();
		~ function (undefined) {
			var PreLoad = function (a, b) {
				var c = b || {};
				this.source = a,
					this.count = 0,
					this.total = a.length,
					this.onload = c.onload,
					this.prefix = c.prefix || "",
					this.init()
			};
			PreLoad.prototype.init = function () {
				var a = this;
				a.source.forEach(function (b) {
					var c = b.substr(b.lastIndexOf(".") + 1).toLowerCase(),
						d = a.prefix + b;
					switch (c) {
						case "js":
							a.script.call(a, d);
							break;
						case "css":
							a.stylesheet.call(a, d);
							break;
						case "jpg":
						case "gif":
						case "png":
						case "jpeg":
						case "mp4":
						case "ogg":
							a.image.call(a, d)
					}
				})
			}, PreLoad.prototype.getProgress = function () {
				return Math.round(this.count / this.total * 100)
			}, PreLoad.prototype.image = function (a) {
				var b = document.createElement("img");
				this.load(b, a), b.src = a
			}, PreLoad.prototype.stylesheet = function (a) {
				var b = document.createElement("link");
				this.load(b, a), b.rel = "stylesheet", b.type = "text/css", b.href = a, document.head.appendChild(b)
			}, PreLoad.prototype.script = function (a) {
				var b = document.createElement("script");
				this.load(b, a), b.type = "text/javascript", b.src = a, document.head.appendChild(b)
			}, PreLoad.prototype.load = function (a, b) {
				var c = this;
				a.onload = a.onerror = a.onabort = function (a) {
					c.onload && c.onload({
						count: ++c.count,
						total: c.total,
						item: b,
						type: a.type
					})
				}
			};
			var tasks = [
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/0.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/1.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/2.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/3.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/4.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/5.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/yao/6.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/textBg.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/text.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/bg.jpg',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/priceDt.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh2.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/indexBottom.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh3.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/balloon.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh1.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/prizeBgWhite.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/prizeBgRedFront.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/prizeBgRed.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/writeBg.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/logo.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/sh4.png',
				'https://horsevision.oss-cn-hangzhou.aliyuncs.com/h5/szhqg-yhb/images/ruleTitleBg.png'
			];
			var $progress = document.getElementById('progress');

			function loading(load) {
				var count = load.count
				var total = load.total
				$progress.innerHTML = Math.round(100 * count / total) + '%'
				if (count === total)
					return complete()
			}

			function next(el, fn) {
				el.className += ' scaleOut'
				setTimeout(function () {
					el.parentNode.removeChild(el)
					fn && fn()
				}, 500)
			}

			function createPages() { }

			function complete() {
				var $loader = document.getElementById('loading')
				var pages = createPages();
				next($loader);
				isYao = false;
				$(".container .text").addClass("slideUpRetourn");
				$(".container .bottomImg").addClass("slideDownRetourn");
			}
			new PreLoad(tasks, {
				onload: loading
			})
		}();
	</script>
	
	<script src="js/util.js?t=12312312312"></script>
	<script src="js/index.js?t=dwadawd"></script>
	<script src="js/shake.js?t=12312312312"></script>
</body>

</html>